<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		.error{
			font-size:15px;
			color: red;
			background: url(reg-error.png) 0 0 no-repeat;
			padding-left: 18px;
		}
		.suc{
			background:none;
			color: red;
			font-size: 10px;
		}
	</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			//focus:获得焦点
			//blur:失去焦点
			//keypress
			//change:select
			$(function(){
				var nameCheck=false;
				var passCheck=false;
				
				$("#name").blur(function(){
					var n=$(this).val();
					if(n.length==0){
						$(this).next().removeClass("suc").addClass("error").html("名字不能不填");
						return nameCheck=false;
					}
					
					for(let i=0;i<n.length;i++){
						let p=n.charAt(i);
						if(!isNaN(p))
						{
							$(this).next().removeClass("suc").addClass("error").html("名字中不能有数字");
							return nameCheck=false;
						}   
					}
					$(this).next().removeClass("error").addClass("suc").html("");
					return nameCheck=true;
				});
				$(":password[name=pass]").blur(function(){
					let $p=$(this);
					if($p.val().length<6){
						$(this).next().removeClass("suc").addClass("error").html("密码不能少于6个字符");
						return passCheck=false;
					}
					
					if($p.val()!=$(":password[name=repass]").val()){
						$(this).next().removeClass("suc").addClass("error").html("两次密码不一致");
						return passCheck=false;
					}
					$(this).next().removeClass("error").addClass("suc").html("");
					return passCheck=true;//
				});
				$("form").submit(function(){
					//提交按钮点击的时候就有效果
					//1：调用一下
					//2：模拟一下事件：trigger 
					$("#name").trigger("blur");
					$(":password[name=pass]").trigger("blur");
					return nameCheck&&passCheck;//
				});
			});
		</script>
	</head>
	<body>
		<form action="jq1.html">
		<p>
			<label for="name">姓名:</label>
			<input id="name" type="text" name="name" value="" placeholder="请输入你的姓名" size="36" maxlength="30"  pattern="\w{2,20}"/><span></span>
		</p>
		<p>
			邮箱：<input type="email" name="email" />
		</p>
		<p>
			密码:
			<input type="password" name="pass" /><span></span>
		</p>
		<p>
			确认密码:
			<input type="password" name="repass" />
		</p>
			<input type="submit" value="注册"/>
		</form>
		
	</body>
</html>
